// import React, { Component } from 'react'

// export default class Mydoctor extends Component {
//     render() {
//         return (
//             <div>
//                 聊天
//             </div>
//         )
//     }
// }

// import React, {createRef} from "react";
// import {ChatList, MessageList} from 'react-chat-elements'
// import 'react-chat-elements/dist/main.css';
// import {Button, Row, Col, Divider, Input} from "antd";

// const {TextArea} = Input;

// class ChatWidget extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             user: null,
//             msgDataList: [],
//             sendMsg: "",
//         }
//         this.clickButton = this.clickButton.bind(this);
//         this.messagesEnd = createRef();
//     }

//     componentDidMount() {
//         let list = [];
//         for (let i = 0; i < 10; ++i)
//             list.push({
//                 position: 'left',
//                 type: 'text',
//                 text: 'hello' + i,
//                 date: new Date(),
//             });
//         this.setState({msgDataList: list});
//         this.setState({user: this.props.user});
//     }

//     componentWillReceiveProps(nextProps, nextContext) {
//         this.setState({user: nextProps.user});
//     }

//     clickButton() {
//         let list = this.state.msgDataList;
//         list.push({
//             position: 'right',
//             type: 'text',
//             text: this.state.sendMsg,
//             date: new Date(),
//         })
//         this.setState({msgDataList: list});
//         this.setState({sendMsg: ""});
//     }

//     componentDidUpdate(prevProps, prevState, snapshot) {
//         this.messagesEnd.scrollTop = this.messagesEnd.scrollHeight;
//     }

//     render() {
//         return (
//             <Col style={{
//                 width: 700,
//                 height: 600,
//                 display: 'inline-block',
//                 borderRight: "3px solid",
//                 borderTop: "3px solid",
//                 borderBottom: "3px solid",
//             }}>
//                 <Row>
//                     <Col style={{
//                         width: 700,
//                         height: 40,
//                         textAlign: "center",
//                         verticalAlign: "middle",
//                         fontSize: 20
//                     }}>
//                         {this.state.user == null ? "" : this.state.user.title}
//                     </Col>
//                 </Row>
//                 <Row>
//                     <div style={{
//                         width: 700,
//                         height: 420,
//                         textAlign: "center",
//                         verticalAlign: "middle",
//                         fontSize: 20,
//                         overflow: "auto",
//                         backgroundColor: "\t#C0C0C0"
//                     }}
//                          ref={(el) => {
//                              this.messagesEnd = el;
//                          }}
//                     >
//                         <MessageList
//                             className='message-list'
//                             dataSource={this.state.msgDataList}
//                         />
//                     </div>
//                 </Row>

//                 <Row>
//                     <Col style={{
//                         width: 700,
//                         textAlign: "center",
//                         verticalAlign: "middle",
//                         fontSize: 20
//                     }}>

//                         <TextArea rows={4} onChange={e => {
//                             this.setState({sendMsg: e.target.value});
//                         }}
//                                   ref={el => (this.inputRef = el)}
//                                   value={this.state.sendMsg}/>
//                         <Button type="primary" onClick={this.clickButton}>发送</Button>
//                     </Col>
//                 </Row>
//             </Col>
//         );
//     }
// }

// class PrivateChatView extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             userList: [],
//             clickUser: null,
//         }
//     }

//     componentDidMount() {
//         let list = [];
//         for (let i = 0; i < 14; ++i)
//             list.push({
//                 avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
//                 alt: 'Reactjs',
//                 title: '用户' + i,
//                 subtitle: 'What are you doing?',
//                 date: new Date(),
//                 unread: Math.floor(Math.random() * 10),
//             });
//         this.setState({userList: list});
//         this.setState({clickUser: list[0]});
//     }
//     render() {
//         return (
//             <div>
//                 <Divider orientation="left" style={{color: '#333', fontWeight: 'normal'}}>
//                     私信列表
//                 </Divider>

//                 <Row>
//                     <Col style={{
//                         width: 400,
//                         height: 600,
//                         display: 'inline-block',
//                         border: "3px solid",
//                         overflow:"auto"
//                     }}>
//                         <ChatList
//                             className='chat-list'
//                             onClick={e => this.setState({clickUser: e})}
//                             dataSource={this.state.userList}/>
//                     </Col>
//                     {this.state.userList.length == 0 ? <div>无私信</div> : <ChatWidget user={this.state.clickUser}/>}

//                 </Row>

//             </div>
//         );
//     }
// }
// export default PrivateChatView;



// import React, { Component } from 'react'

// export default class Mydoctor extends Component {
//     render() {
//         return (
//                 <div style={{ width: '100%', height: '100%' }}>
//                     <iframe src="http://47.100.123.89:8881/" width='100%' height='100%'>
//                     </iframe>
//                 </div>
//         )
//     }
// }




import React, { useState, useEffect } from 'react'
// import Header from "../../components/Header"
// import "./index.scss"
let websock = null
export default function App(props) {
  let [dataname, setDataname] = useState('')
  // let img = sessionStorage.getItem('userimg')
  //  let img ='https://unsplash.it/400/800/?@name'
  useEffect(() => {
    const wsuri = "ws://localhost:9990"
    websock = new WebSocket(wsuri);
    initWebSocket(websock);
    return () => websocketclose()
    }, [])


  //发送
  function getdata() {
    if (dataname !== "") {
      let doxs = document.querySelector('.dox')
      const div = document.createElement("li")
      const name = '小余'
      div.innerHTML = `<div class = 'li'>
      <p>
      <span>${name}</span>
       <img src='https://unsplash.it/400/800/?@name'/>
      </p>
     
      <p  > ` +
        dataname +
        "</p></div>";
      doxs.appendChild(div)
      websocketsend(JSON.stringify({
        text: dataname,
        img: 'https://unsplash.it/400/800/?@name',
        // name: "小余",
      }))
      setDataname('')
      let dox = document.getElementsByClassName('main')[0]
      let lis = document.getElementsByTagName('LI')
      dox.scrollTop = lis[lis.length - 1].offsetTop
    }
  }
  let initWebSocket = () => { //初始化weosocket
    websock.onmessage = websocketonmessage;
    websock.onopen = websocketonopen;
    websock.onerror = websocketonerror;
    websock.onclose = websocketclose;
  }
  function websocketonopen() { //连接建立之后执行send方法发送数据
    if (websock.readyState === 1) {
      console.log('连接成功')
    }
  }
  function websocketonerror() {//连接建立失败重连
    initWebSocket();
  }
  //接收
  function websocketonmessage(msg) { //数据接收
    let { text } = JSON.parse(msg.data)
    let doxs = document.querySelector('.dox')
    const div = document.createElement("li")
    const name = '小余'

    div.innerHTML = `<div class = 'lis'><p><span>${name}</span><img src='https://img1.baidu.com/it/u=3254254623,2492769581&fm=26&fmt=auto&gp=0.jpg'/><p/>` +
      text +
      "</p></div>";
    doxs.appendChild(div)
    let dox = document.getElementsByClassName('main')[0]
    let lis = document.getElementsByTagName('LI')
    dox.scrollTop = lis[lis.length - 1].offsetTop
  }
  let websocketsend = (Data) => {//数据发送
    websock.send(Data)
  }

  function websocketclose(e) {  //关闭
    console.log('断开连接', e);
  }
  return (
    <div className='service'>
      {/* <Header {...props} title={props.location.state.name} /> */}
      <main className='main'>
        <ul className="dox">

        </ul>
      </main>
      <footer>
        <input type="text" placeholder='请输入要说的话' value={dataname} onChange={(e) => {
          setDataname(e.target.value)
        }} onKeyDown={(e) => {
          if (e.keyCode === 13) {
            getdata()
          }
        }} />
        <button onClick={() => {
          getdata()
        }}>发送</button>
      </footer>
    </div>
  )
}
